import React, { Component } from 'react';
import './Ranking.css'
class Ranking extends Component {
    constructor(props) {
        super(props)

        this.state = {
            official: [],
            global: []
        }
    }

    componentDidMount() {
        this.$axios([{
            url: 'toplist/detail'
        }]).then(res => {
            console.log(res[0].list);
            this.setState(state => {
                return {
                    official: res[0].list.splice(0, 4),
                    global: res[0].list.splice(4),
                }
            })
        })
    }
    Junp() {

    }
    render() {
        return (
            <div className="lr-list">
                <div className="lr-title">
                    官方榜
                </div>
                <ul className="lr-wrap">
                    {this.state.official.map((item, index) => {
                        return (
                            <li key={'official' + index}>
                                <div className="left">
                                    <img src={item.coverImgUrl} alt="" />
                                    <div className="lrSonglist">{item.updateFrequency}</div>
                                </div>
                                <div className="right">
                                    {item.tracks.map((items, indexs) => {
                                        return (
                                            <p key={'officialP' + indexs}>{(+indexs + 1) + '. ' + items.first + ' - ' + items.second}</p>
                                        )
                                    })}
                                </div>
                            </li>
                        )
                    })}
                </ul>
                <div className="lr-title">全球榜
                </div>
                <div className="lr-wrapGlobal">
                    {this.state.global.map((item, index) => {
                        return (
                            <div className="lr-bigbox" key={index}>
                                <div className="lr-global" onClick={this.Junp.bind(this)}>
                                    <img className="img" src={item.coverImgUrl} alt=""></img>
                                    <div className="globalInfo">{item.updateFrequency}</div>
                                </div>
                            </div>

                        )
                    })}

                </div>
            </div>
        );
    }
}

export default Ranking;